<template>
  <avue-form :key="reload"
             :option="option"
             v-model="form"></avue-form>
</template>
<script>
var baseUrl = 'https://cli.avuejs.com/api/area'
export default {
  data () {
    return {
      form: {},
      reload: Math.random(),
    }
  },
  watch: {
    'form.province' () {
      this.reload = Math.random()
    }
  },
  computed: {
    option () {
      return {
        column: [{
          label: '省份',
          prop: 'province',
          type: 'select',
          props: {
            label: 'name',
            value: 'code'
          },
          dicUrl: `${baseUrl}/getProvince`,
          rules: [
            {
              required: true,
              message: '请选择省份',
              trigger: 'blur'
            }
          ]
        }, {
          label: '子表单',
          prop: 'dynamic',
          type: 'dynamic',
          span: 24,
          children: {
            column: [
              {
                label: '城市',
                prop: 'city',
                type: 'select',
                props: {
                  label: 'name',
                  value: 'code'
                },
                dicUrl: `${baseUrl}/getCity/` + this.form.province,
                rules: [
                  {
                    required: true,
                    message: '请选择城市',
                    trigger: 'blur'
                  }
                ]
              }]
          }
        }]
      }
    }
  }
}
</script>
